<template>
	<view class="details" :style="{paddingTop: paddingHeight + 'px'}">
		<nav-bar></nav-bar>
		<view class="m-container">
			<!--pages/cssCase/newTab/index.wxml-->
			<view class="card">
				<view class="head_tab">
					<view @click="navTab(item.type)" v-for="(item,index) in tabs" :key="index" class="head_item"
						:class="{head_item_active: item.type == nav_type , ft: item.type == 2,br1: item.type == 1,br2: item.type == 2}">
						{{item.name}}
					</view>
				</view>
				<view class="head_con"
					:style="{borderRadius: nav_type == 1 ? '0 32rpx 32rpx 32rpx' : '32rpx 0 32rpx 32rpx'}">
					<view class="day" v-if="nav_type == 1">
						<view class="title">
							本周日目标达成情况
						</view>
						<view class="type_tag">
							<text class="t_t">晚餐后</text>
							<view class="weeks">
								<view class="dot" :class="{has: item == 1}" v-for="(item,index) in tag4" :key="index">
								</view>
							</view>
						</view>
						<view class="type_tag">
							<text class="t_t">午餐后</text>
							<view class="weeks">
								<view class="dot" :class="{has: item == 1}" v-for="(item,index) in tag3" :key="index">
								</view>
							</view>
						</view>
						<view class="type_tag">
							<text class="t_t">早餐后</text>
							<view class="weeks">
								<view class="dot" :class="{has: item == 1}" v-for="(item,index) in tag2" :key="index">
								</view>
							</view>
						</view>
						<view class="type_tag">
							<text class="t_t">清晨测量</text>
							<view class="weeks">
								<view class="dot" :class="{has: item == 1}" v-for="(item,index) in tag1" :key="index">
								</view>
							</view>
						</view>
						<view class="type_tag" style="margin-top: 28rpx;">
							<text class="t_t"></text>
							<view class="weeks">
								<view class="week" :class="{has: item == 1}" v-for="(item,index) in week" :key="index">
									{{ item }}
								</view>
							</view>
						</view>
					</view>
					<view class="charts" v-else>
						<view class="title">
							趋势
						</view>
						<view class="charts_box">
							<uni-ec-canvas class="uni-ec-canvas" ref="mychart-grade" canvas-id="mychart-grade">
							</uni-ec-canvas>
						</view>
						<view class="info">
							<view class="max">
								<u-image width="48rpx" height="48rpx" :showMenuByLongpress="false"
									src="http://oss.antaimedical.com/images/static/2024/07/669780f7eb14d0f049f44d609oZ4cDDxDnAF5b8593f18de3e7483c5b4dc81a63b4fd.png"
									:lazy-load="true"></u-image>
								<view class="r_i">
									<view class="i_t">
										历史最高
									</view>
									<view class="i_d">
										<text class="data">{{ gradeInfo.maxMbScore }}</text>
										<text
											style="font-size: 20rpx;">{{ gradeInfo.maxMbScoreTime | timeFilte }}</text>
									</view>
								</view>
							</view>
							<view class="min">
								<u-image width="48rpx" height="48rpx" :showMenuByLongpress="false"
									src="http://oss.antaimedical.com/images/static/2024/07/669780deeb14d0f049f44d5fBrGQQS0Clmq2b19658c11b0b0c33d50b56d522d23bc7.png"
									:lazy-load="true"></u-image>
								<view class="r_i">
									<view class="i_t">
										历史最低
									</view>
									<view class="i_d">
										<text class="data">{{ gradeInfo.minMbScore }}</text>
										<text style="font-size: 20rpx;">{{ gradeInfo.minMbScoreTime | timeFilte}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue';
	import * as echarts from '@/components/uni-ec-canvas/echarts.min.js';
	import {
		findMetabolicFlexScoreDayTarget,
		findMetabolicFlexScoreLineChart,
		findMaxMinMetabolicFlexScore
	} from '@/api/index.js'
	export default {
		data() {
			return {
				paddingHeight: uni.getStorageSync('navbarHeight'),
				userId: uni.getStorageSync("userId"),
				tabs: [{
					name: "日目标",
					type: 1
				}, {
					name: "弹性代谢分数历史趋势",
					type: 2
				}],
				nav_type: 1,
				tag1: [],
				tag2: [],
				tag3: [],
				tag4: [],
				week: ['一', '二', '三', '四', '五', '六', '日'],
				gradeInfo: {}
			}
		},
		filters: {
			timeFilte(data) {
				if (data) {
					return data.replaceAll('-', '/')
				} else {
					return ''
				}
			}
		},
		onLoad() {
			this.fetchDaysInfo()
		},
		methods: {
			async fetchChartsInfo() {
				uni.showLoading({
					title: '加载中'
				})
				let params = {
					userId: this.userId
				}
				try {
					const res = await findMetabolicFlexScoreLineChart(params)
					const res_2 = await findMaxMinMetabolicFlexScore(params)
					uni.hideLoading()
					if (res.code == 200 && res_2.code == 200) {
						this.chartsData = res.data
						this.gradeInfo = res_2.data
						let data = res.data.map(item => {
							return {
								value: item.mbScore,
								symbol: 'emptyCircle',
								itemStyle: {
									color: '#545DDE'
								}
							}
						})
						this.drawCharts(data)
					}
				} catch (e) {
					//TODO handle the exception
					uni.hideLoading()
				}
			},
			async fetchDaysInfo() {
				uni.showLoading({
					title: '加载中'
				})
				let params = {
					userId: this.userId
				}
				try {
					const res = await findMetabolicFlexScoreDayTarget(params)
					uni.hideLoading()
					if (res.code == 200) {
						this.tag1 = res.data.tag1
						this.tag2 = res.data.tag2
						this.tag3 = res.data.tag3
						this.tag4 = res.data.tag4
					}
				} catch (e) {
					//TODO handle the exception
					uni.hideLoading()
				}
			},
			navTab(e) {
				this.nav_type = e
				if (this.nav_type == 1) {
					this.fetchDaysInfo()
				} else {
					this.fetchChartsInfo()
				}
			},
			drawCharts(arr) {
				this.$refs['mychart-grade'].init((canvas, width, height, dpr) => {
					const chart = echarts.init(canvas, null, {
						width,
						height: height,
						devicePixelRatio: dpr // new
					});
					chart.setOption(
						this.getOption(arr)
					);
					return chart;
				});
			},
			getOption(data) {
				return {
					grid: {
						left: 0,
						right: '8%',
						bottom: '5%',
						top: '8%',
					},
					dataZoom: {
						id: 'ecGrade',
						type: 'inside',
						filterMode: 'none',
						xAxisIndex: 0,
						startValue: 0,
						endValue: 11,
						zoomLock: true
					},
					xAxis: {
						type: 'category',
						splitNumber: 11,
						axisLine: {
							lineStyle: {
								type: 'dashed',
								color: '#E6EBF5'
							}
						},
						axisLabel: {
							show: false
						},
						axisTick: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						position: 'right',
						splitNumber: 3,
						interval: 8,
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#ecf0f7',
							}
						},
						max: 16,
						min: 0,
						axisLabel: {
							verticalAlign: 'middle',
							align: 'bottom',
							padding: [0, 0, 10, 0],
							formatter: (value, index) => {
								if (value == 0) {
									return '低'
								} else if (value == 8) {
									return '中'
								} else if (value == 16) {
									return '高'
								}
							},
						}
					},
					series: [{
						name: '分数',
						type: 'line',
						smooth: true,
						selectedMode: 'single',
						symbolSize: 6,
						connectNulls: true,
						lineStyle: {
							width: 1,
							color: '#545DDE'
						},
						areaStyle: {
							origin: 'auto',
							opacity: 1,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(84,93,222,0.1)'
								},
								{
									offset: 0.85,
									color: 'rgba(84,93,222,0)'
								}
							])
						},
						data
					}]
				}
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #F6F7FD;
		min-height: 100%;
	}
</style>
<style lang="scss" scoped>
	.details {
		padding-bottom: 80rpx;
	}

	.m-container {
		width: 100%;
		padding: 48rpx;

		.card {
			width: 100%;
			background: #e3e5f8;
			border-radius: 32rpx;

			.head_tab {
				width: 100%;
				line-height: 112rpx;
				display: flex;
				background: linear-gradient(180deg, #e3e5f8 50%, #fff 50%);
				border-radius: 32rpx 32rpx 0 0;
				font-size: 32rpx;
				overflow: hidden;

				.head_item {
					width: 50%;
					height: 112rpx;
					padding: 0 74rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: linear-gradient(360deg, #e3e5f8 0%, #e3e5f8 100%);
					font-weight: 500;
					border-radius: 48rpx 48rpx 0 0;
					font-size: 32rpx;
					color: rgba(#545DDE, .7);
					font-family: PingFangSC-Medium, PingFang SC;
				}

				.br1 {
					border-radius: 0 48rpx 48rpx 0;
				}

				.br2 {
					border-radius: 48rpx 0 0 48rpx;
				}

				.head_item_active {
					background: #fff;
					color: #545DDE;
				}

				.ft {
					font-size: 28rpx;
					line-height: 40rpx;
					overflow-wrap: normal;
				}
			}

			.head_con {
				width: 100%;
				padding: 48rpx 32rpx 64rpx;
				background: #fff;
				border-radius: 0 0 32rpx 32rpx;

				.charts,
				.day {
					width: 100%;
					color: #333;

					.title {
						padding-bottom: 16rpx;
						text-align: left;
						font-weight: 500;
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
					}

					.type_tag {
						margin-top: 48rpx;
						display: flex;

						.t_t {
							width: 15%;
							font-size: 22rpx;
							text-align: left;
						}

						.weeks {
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding-left: 34rpx;

							.week {
								font-size: 24rpx;
								width: 36rpx;
								height: 36rpx;
							}

							.dot {
								width: 36rpx;
								height: 36rpx;
								border: 2rpx solid #666666;
								border-radius: 50%;
							}

							.has {
								border: 0;
								background-color: #545DDE;
							}
						}
					}
				}

				.charts {
					.charts_box {
						width: 100%;
						height: 280rpx;
						padding: 64rpx 0 0 16rpx;

						.canvas {
							width: 100%;
							height: 100%;
						}
					}

					.info {
						display: flex;
						align-items: center;
						margin-top: 78rpx;

						.min,
						.max {
							width: 50%;
							display: flex;
							align-items: center;
							justify-content: center;

							.r_i {
								padding-left: 10rpx;
								display: flex;
								flex-direction: column;
								align-items: flex-start;
								justify-content: center;
								color: #666;

								.i_t {
									font-size: 20rpx;
									padding-bottom: 4rpx;
								}

								.i_d {
									display: flex;
									align-items: center;

									.data {
										font-size: 28rpx;
										padding-right: 16rpx;
										font-family: PingFangSC-Medium, PingFang SC;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>